<template>
    <div class="hot-nav">
      <div class="hot-nav-content" v-if="homeNav.length>0">
        <div class="nav-content-inner">
          <a class="inner-item" v-for="(nav,index) in homeNav" :key="index">
            <img :src="nav.iconurl"/>
            <span>{{nav.icontitle}}</span>
          </a>
        </div>
      </div>

      <div class="hot-nav-bottom">
        <div class="hot-nav-bottom-inner" :style="innerByStyle"></div>
      </div>

    </div>
</template>

<script>
  import {mapState} from 'vuex'
    export default {
      name: "hot-nav",
      data(){
          return{
            //1.屏幕宽度
            screenW:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
            //滚动内容宽度
            scrollCotentW:720,
            //滚动条背景的长度
            bgBarW:100,
            //4.滚动条的长度
            barXWidth:0,
            //起点
            startX:0,
            //结束点
            endFlag:0,
            //移动距离
            barMoveWidth:0
          }
      },
      computed:{
        ...mapState(['homeNav']),
        innerByStyle(){
          return{
            width:`${this.barXWidth}px`,
            left:`${this.barMoveWidth}px`
          }
        }
      },
      mounted(){
          //请求首页导航数据
          this.$store.dispatch('reqHomeNav')
          this.getBottomBarWidth();
          this.bindEvent();
      },
      methods:{
        getBottomBarWidth(){
          this.barXWidth=this.bgBarW*(this.screenW/this.scrollCotentW)
        },
        //移动端监听
        bindEvent(){
          this.$el.addEventListener('touchstart',this.handleTouchStart,false)
          this.$el.addEventListener('touchmove',this.handleTouchMove,false)
          this.$el.addEventListener('touchend',this.handleTouchEnd,false)
        },
        //开始触摸
        handleTouchStart(event){
          //获取第一个触点
          let touch=event.touches[0];
          //求出起始点
          this.startX=Number(touch.pageX);
        },
        //开始移动
        handleTouchMove(){
          //获取第一个触点
          let touch=event.touches[0];
          //求出移动距离
          let moveWidth=Number(touch.pageX)-this.startX;
          //求出滚动条走的距离
          this.barMoveWidth= -((this.bgBarW/this.scrollCotentW) * moveWidth-this.endFlag);
          //边界值处理
          if (this.barMoveWidth<=0){ //左边
            this.barMoveWidth=0;
          }else if (this.barMoveWidth>=this.bgBarW-this.barXWidth){ //右边
            this.barMoveWidth=this.bgBarW-this.barXWidth
          }
        },
        //开始触摸
        handleTouchEnd(){
          this.endFlag=this.barMoveWidth
        },
      }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .hot-nav
    width 100%
    height 180px
    position relative
    background-color #fff
    padding-bottom  10px
    .hot-nav-content
      width 100%
      overflow-x scroll
      .nav-content-inner
        width 720px
        height 180px
        display flex
        flex-wrap wrap
        .inner-item
          width 90px
          height 90px
          display flex
          color #666
          flex-direction column
          justify-content center
          align-items center
          font-size 14px
      img
         width 50%
         margin-bottom 8px
      .hot-nav-content::scroll
        display none
    .hot-nav-bottom
        width 100px
        height 2px
        background-color #ccc
        position absolute
        left 24%
        margin-left 50px
        bottom 8px
    .hot-nav-bottom-inner
        position absolute
        left 0
        height 100%
        background-color orange
        width 0
</style>
